<template>
	<view class="hos-list-box">
		<view class="hos-item-box" v-for="list in hospital" :key="list.id" @click="hospitalDetail(list.id)">
			<view class="hos-thumb-box"><image :src="list.logo"></image></view>
			<view class="hos-text-box">
				<text class="hos-title">{{list.companyname}}</text>
				<view class="grade-box">
					<text class="score">{{list.rank.all}}</text>
					<text class="comments_num">{{list.rank.count.dianping_count}}</text>
					<view class="start-box">
						<image class="start-img" src="../../static/imgs/diamond.png"></image>
						<image class="start-img" src="../../static/imgs/diamond.png"></image>
						<image class="start-img" src="../../static/imgs/diamond.png"></image>
						<image class="start-img" src="../../static/imgs/diamond.png"></image>
						<image class="start-img" src="../../static/imgs/diamond.png"></image>
					</view>
				</view>
				<view class="propert-box">
					<text>{{list.grandparent_type}}</text>
					<text>{{list.other_name}}</text>
					<text>{{list.category}}</text>
				</view>
				<view class="position_info">{{list.distance}}</view>
				<view class="address_info">{{list.address}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageindex:1,
				hospital:[]
			}
		},
		onLoad() {
			this.getHospitalList()
		},
		methods: {
			async getHospitalList(callback){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=hospital_page&a=hospital_list&page='+this.pageindex
				})
				console.log(res);
				this.hospital = [...this.hospital,...res.data.data.list]
				callback && callback()
			},
			
			hospitalDetail(id){
				uni.navigateTo({
					url:'/pages/hospitalDetail/hospitalDetail?id='+id
				})
			}
		}
	}
</script>

<style>
.hos-list-box{
	/* border: 1px solid red; */
}
.hos-item-box{
	display: flex;
	justify-content: space-between;
	padding: 10px 0px;
	border-bottom: 1px solid #f1eded;
}
.hos-thumb-box{
	flex: 1;
	width: 130px;
	height: 130px;
	padding: 10px;
	overflow: hidden;
}

.hos-thumb-box image{
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.hos-text-box{
	flex: 2;
	padding: 10px;
}
.hos-title{
	font-size: 16px;
	color: #373737;
	font-weight: bold;
	display: block;
	box-sizing: border-box;	
}
.grade-box{
	margin: 5px auto;
}

.score{
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	color: #5a9ee2;
	font-size: 13px;
	font-weight: 600;
}

.comments_num{
	color: #898989;
	font-size: 12px;
	margin: 0px 10px;
}

.start-box{
	display: inline-block;
}

.start-img{
	width: 10px;
	height: 10px;
	margin: 0 2px;
}
.propert-box text{
	border: 1px solid #5a9ee2;
	border-radius: 5px;
	display: inline-block;
	margin: 5px;
	padding: 2px 4px;
	color: #5a9ee2;
	font-size: 15px;
}

.propert-box text:nth-child(1){
	margin-left: 0px;
}

.position_info{
	/* border: 1px solid blue; */
	display: block;
	padding: 5px;
	color: #898989;
	font-size: 13px;
}

.address_info{
	/* border: 1px solid blue; */
	display: block;
	padding: 5px;
	color: #898989;
	font-size: 13px;
}
</style>
